<template>
<div class="foo">
    <h2>{{content}}</h2>
    <ul>
        <li v-for="(person, index) in persons" :key="person.name">
            {{`第${index}人，姓名: ${person.name}，年龄: ${person.age}`}}
        </li>
    </ul>
    <button @click="onClick">click me</button>
    <hr>
    <fieldset>
        <legend>content</legend>
        <slot>default slot</slot>
    </fieldset>
    <fieldset>
        <legend>footer</legend>
        <slot name="footer">footer slot</slot>
    </fieldset>
    <fieldset>
        <legend>header scoped</legend>
        <slot name="header" :content="content">header scoped slot {{content}}</slot>
    </fieldset>    
</div>
</template>

<script>
export default {
    name: 'foo',
    props: {
        content: {
            type: String,
            default: 'Hi, this is default content!',
        },
        persons: {
            type: Array,
            default () {
                return [{
                    name: 'Default',
                    age: 10
                }]
            }
        }
    },
    methods: {
        onClick () {
            this.$emit('echo', this.content)
            console.log('foo: trigger echo event')
        }
    }
}
</script>

<style>
.foo {
    border: 1px solid blue;
    padding: 10px;
    margin: 10px;
    text-align: left;
}
</style>
